<template>
    <div class="titlebox">
        <div class="text"></div>
        <div
          class="right"
          :style="{ alignItems: 'center', lineHeight: '32.5px' }"
        >
          <button
            type="primary"
            size="small"
            class="bewdao daochu"
            v-for="i in btn"
            :key='i.index'
            @click="oepnDialog(i.index)"
          >
           {{i.name}}
          </button>
          <el-tooltip class="item" effect="dark" content="刷新" placement="top">
            <span
              @click="shuaxin"
              :style="{ cursor: 'pointer', fontSize: '20px' }"
              ><i class="el-icon-refresh-right"></i
            ></span>
          </el-tooltip>
          <el-dropdown trigger="click" @command="command">
            <span class="el-dropdown-link">
              <el-tooltip
                class="item"
                effect="dark"
                content="密度"
                placement="top"
              >
                <span :style="{ cursor: 'pointer', fontSize: '20px' }"
                  ><i class="el-icon-d-caret"></i
                ></span>
              </el-tooltip>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item class="dropdown-list" command="默认"
                >默认</el-dropdown-item
              >
              <el-dropdown-item class="dropdown-list" command="中等"
                >中等</el-dropdown-item
              >
              <el-dropdown-item class="dropdown-list" command="紧凑"
                >紧凑</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
</template>

<script>
export default {
  props: {
    btn: {
      default: () => [{
        index: 0,
        name: '新增'
      }]
    }
  },
  methods: {
    command (val) {
      this.$emit('command', val)
    },
    shuaxin () {
      this.$emit('shuaxin')
    },
    oepnDialog (index) {
      this.$emit('oepnDialog', index)
    }
  }
}
</script>

<style lang="scss" scoped>
.titlebox {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    .text {
      font-size: 16px;
    }
    .right {
      align-items: center;

      .bewdao {
        padding: 0 10px;
        height: 32px;
      }
      .daochu {
        margin-right: 20px;
        background-color: #1890ff;
        color: #fff;
        border: none;
        border-radius: 3px;
      }
    }
  }
</style>